<template>
  <q-dialog v-model="visible">
    <q-card
      style="max-width: 90vw; max-height: calc(100vh - 2rem)"
      class="overflow-hidden"
    >
      <q-card-section class="text-h6">{{
        $t(lang + "修改地图")
      }}</q-card-section>
      <q-separator />
      <div style="max-height: calc(100vh - 9rem); overflow-y: auto">
        <q-card-section class="q-gutter-y-sm">
          <q-input outlined v-model="map.name" :label="$t(lang + '地图名称')" />
          <q-separator />
          <q-field :label="$t(lang + 'SLAM导航地图')" outlined stack-label>
            <template v-slot:control>
              <div class="row q-gutter-x-sm q-mt-xs full-width">
                <q-btn
                  no-caps
                  no-wrap
                  icon="archive"
                  color="secondary"
                  class="col"
                  @click="download"
                  :label="$t(lang + '下载')"
                />
                <q-btn
                  no-caps
                  no-wrap
                  icon="unarchive"
                  color="primary"
                  class="col"
                  @click="mapUploader.show(map)"
                  :label="$t(lang + '上传')"
                />
              </div>
            </template>
          </q-field>
          <q-field :label="$t(lang + '地图操作')" outlined stack-label>
            <template v-slot:control>
              <div class="row q-gutter-x-sm q-mt-xs full-width">
                <q-btn
                  no-caps
                  no-wrap
                  icon="cleaning_services"
                  :label="$t(lang + '连线清理')"
                  color="accent"
                  class="col"
                  @click="lineClean"
                />
                <q-btn
                  no-caps
                  icon="file_copy"
                  :label="$t(lang + '复制地图')"
                  color="primary"
                  class="col"
                  @click="mapCopy"
                />
              </div>
            </template>
          </q-field>
        </q-card-section>
        <q-card-section class="q-pa-none row">
          <q-btn
            no-caps
            stretch
            color="primary"
            class="col"
            :label="$t(lang + '修改地图')"
            @click="update"
          />
          <q-btn
            no-caps
            stretch
            color="secondary"
            class="col"
            :label="$t(lang + '还原地图')"
            @click="reset"
          />
        </q-card-section>
      </div>
    </q-card>
    <map-img-uploader ref="mapUploader" />
  </q-dialog>
</template>

<script setup>
import { ref } from "vue";
import { api } from "boot/axios";
import { useAPIStore } from "stores/api";
import { useQuasar } from "quasar";
import MapImgUploader from "components/map/MapImgUploader.vue";
import { useUiStore } from "stores/ui";
import { useI18n } from "vue-i18n";

const t = useI18n().t;
const lang = "mapIndex.ModifyMap.";
const $q = useQuasar();
defineExpose({ show });
const emit = defineEmits(["getMapList"]);
const visible = ref(false);
const mapUploader = ref();
const originMap = ref({});
const ui = useUiStore();
const map = ref({
  id: "",
  name: "",
  type: "",
  level: 0,
  group: "",
});
function show(data) {
  originMap.value = data;
  map.value = JSON.parse(JSON.stringify(data));
  visible.value = true;
}

// 点位连线清理
function lineClean() {
  api
    .get(useAPIStore().mapUrl + "map/clear/line/" + map.value.id)
    .then((rs) => {
      if (rs.data === 0) {
        $q.notify({
          type: "positive",
          message: t(lang + "当前地图已经没有无效的连线"),
          position: "top",
        });
      } else {
        $q.notify({
          type: "info",
          message: t(lang + "已清除") + rs.data + t(lang + "条无效连线"),
          position: "top",
        });
      }
      emit("getMapList");
    });
}
// 复制地图
function mapCopy() {
  $q.dialog({
    title: t(lang + "复制地图"),
    message: t(lang + "请填入复制出的新地图的名称"),
    dark: ui.isDark,
    prompt: {
      model: map.value.name + t(lang + "副本"),
      type: "text",
    },
    ok: t("ok"),
    cancel: t("cancel"),
  }).onOk((data) => {
    api
      .get(useAPIStore().mapUrl + "map/copy", {
        params: { id: map.value.id, mapName: data },
      })
      .then((rs) => {
        if (rs.data) {
          $q.notify({
            message: t(lang + "复制地图成功"),
            type: "positive",
            position: "bottom",
          });
          emit("getMapList");
        }
      });
  });
}
// 下载地图
function download() {
  const imgUrl = "data:image/png;base64," + map.value.mapBase64;
  const img = document.createElement("a");
  img.href = imgUrl;
  img.setAttribute("download", map.value.name);
  img.click();
}
// 修改地图
function update() {
  api.put(useAPIStore().mapUrl + "map/simple", map.value).then((rs) => {
    if (rs.data === "modified") {
      $q.notify({ message: t(lang + "地图修改成功"), type: "positive" });
      visible.value = false;
      emit("getMapList");
    }
  });
}
// 还原修改
function reset() {
  map.value = JSON.parse(JSON.stringify(originMap.value));
}
</script>
<style scoped></style>
